<template>
  <div class='container'>
      <!-- 搜索栏 -->
    <el-form :inline="true" :model="listQuery" size="mini" label-width="80px" @submit.native.prevent>
      <el-row type='flex' align='middle'>
        <el-col :span="8">
          <el-form-item label="订单状态">
              <el-select v-model="listQuery.status" class="width-input">
              <el-option
                  v-for="(item, index) in acceptAdjustType"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
              ></el-option>
              </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="用户ID">
            <el-input 
                placeholder="请输入用户ID"
                @keyup.native="keyID" 
                style="width: 150px" 
                v-model="listQuery.userId">
            </el-input>
          </el-form-item>
        </el-col>
        </el-row>
        <el-row>
        <el-col :span="8">
            <el-form-item label="开始时间">
              <el-date-picker
                style="width: 100%;"
                v-model="listQuery.startTime"
                type="datetime"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="开始时间">
              </el-date-picker>
			      </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="结束时间">
              <el-date-picker
                style="width: 100%;"
                v-model="listQuery.endTime"
                type="datetime"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="开始时间">
              </el-date-picker>
			      </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <el-button type="primary" @click="handleFilter()">检索</el-button>
              <el-button type="primary" @click="resetlistQuery()">重置</el-button>          
            </el-form-item>
          </el-col>
      </el-row>
    </el-form>
    <!-- 表格 -->
    <el-table
      :data="tableData"
      v-loading="listLoading"
      element-loading-text="正在加载"
      border=""
      style="width: 100%">
      <el-table-column prop="id" label="订单流水号" align="center" width='100'>
          <span slot-scope="scope">{{scope.row.id ? scope.row.id:'———'}}</span>
      </el-table-column>
      <el-table-column prop="userId" label="用户ID" align="center" width='100'>
          <span slot-scope="scope">{{scope.row.userId ? scope.row.userId:'———'}}</span>
      </el-table-column>
      <el-table-column prop="userName" label="用户昵称" align="center">
          <span slot-scope="scope">{{scope.row.alipayRealName ? scope.row.alipayRealName:'———'}}</span>
      </el-table-column>
      <el-table-column prop="alipayAccount" label="提现账户" align="center">
          <span slot-scope="scope">{{scope.row.alipayAccount ? scope.row.alipayAccount:'———'}}</span>
      </el-table-column>
      <el-table-column prop="alipayRealName" label="姓名" align="center">
          <span slot-scope="scope">{{scope.row.alipayRealName ? scope.row.alipayRealName:'———'}}</span>
      </el-table-column>
      <el-table-column prop="createTime" label="提现时间" align="center" width="180">
          <span slot-scope="scope">{{scope.row.createTime ? scope.row.createTime:'———'}}</span>
      </el-table-column>
      <el-table-column prop="amount" label="提现金额" align="center">
          <span slot-scope="scope">{{scope.row.amount ? scope.row.amount:'———'}}</span>
      </el-table-column>
      <el-table-column prop="status" label="提现状态" align="center">
          <span slot-scope="scope">{{scope.row.status | formStatus}}</span>
      </el-table-column>
      <!-- <el-table-column label="操作" align="center" width="180px">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="openDialog(scope.row.id)">详情</el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        background=""
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="listQuery.pageIndex"
        :page-sizes="[10,20,30, 50]"
        :page-size="listQuery.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <!-- 弹框 -->
    <el-dialog title="详情" :visible.sync="dialogVisible" width="30%">
        
    </el-dialog> 
  </div>
</template>

<script>
import { pageQueryUser,completeExcel } from '@/api/discountRecord';
export default {
  data () {
    return {
        total:0,
        tableData:[],
        listLoading:false,
        dialogVisible:false,
        // 获取提现列表
        listQuery: {
            pageIndex: 1,
            pageSize: 20,
            status:'',
            userId:'',
            startTime:'',
            endTime:''
        },
        // 搜索等级
        acceptAdjustType: [
        { id: "", name: "全部" },
        { id: 0, name: "提现中" },
        { id: 1, name: "提现成功" },
        { id: 2, name: "提现失败" },
      ]
    }
  },

  methods: {
    // 导入
      beforeUpload(file){
      console.log(file,'文件');
      this.files = file;
      const extension = file.name.split('.')[1] === 'xls'
      const extension2 = file.name.split('.')[1] === 'xlsx'
      // const isLt5M = file.size / 1024 / 1024 < 5
      if (!extension && !extension2) {
          this.$message.warning('上传模板只能是 xls、xlsx格式!')
          return
      }
      // if (!isLt5M) {
      //     this.$message.warning('上传模板大小不能超过 5MB!')
      //     return
      // }
      this.fileName = file.name;
      setTimeout(() => {
          this.submitUpload();
      },500);
      return false; // 返回false不会自动上传
    },   
    // 上传excel
    submitUpload() {
        console.log('上传'+this.files.name)
        if(this.fileName == ""){
            this.$message.warning('请选择要上传的文件！')
            return false
        }
        let fileFormData = new FormData();
        fileFormData.append('file', this.files, this.fileName);
        // 执行上传excel
        completeExcel(fileFormData).then(res =>{
          if (res.success) {
            this.getList();
          } else {
            this.$notify.error({
              title: "失败",
              message: res.message,
              duration: 2000
            });
          }
        })
    },
    // 导出
    exportExcel() {
      console.log('a')
      let that = this;
      let params = JSON.stringify(this.listQuery);
      const req = new XMLHttpRequest();
      req.open('post',process.env.BASE_API + '/admin/withdraw/excel', true);
      req.responseType = 'blob';
      req.setRequestHeader('Content-Type', 'application/json');
      req.setRequestHeader('Authorization', sessionStorage.getItem('token'));
      req.onload = function() {
        console.log(req);
        console.log('导出返回',req.response);
        if (req.response.type != 'application/json') {
          const data = req.response;
          const blob = new Blob([data]);
          const blobUrl = window.URL.createObjectURL(blob);
          const a = document.createElement('a');
          a.style.display = 'none';
          a.download = new Date().getTime()+'.xls';
          a.href = blobUrl;
          a.click();
        } else {
          that.$notify.error({
            title: '失败',
            message: req.data.Message,
            duration: 2000
          })
        }
      };
      req.send(params);
    },
    // 分页
    handleSizeChange(val) {
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.pageIndex = val;
      this.getList();
    },
    resetlistQuery() {
      this.listQuery = {
            pageIndex: 1,
            pageSize: 20,
            status:'',
            userId:'',
            startTime:'',
            endTime:''
        };
      this.handleFilter();
    },
    // 查询
    handleFilter() {
      this.listQuery.pageIndex = 1;
      this.getList();
    },
    // 打开弹框
    openDialog(id){
      this.dialogVisible = true;
    },
    // 获取用户列表
    getList(){
      this.listLoading = true;
      console.log(this.listQuery)
      pageQueryUser(this.listQuery).then(res =>{
        console.log(res)
            this.tableData = res.list;
            this.total = res.total;
            this.listLoading = false;
      }).catch(res => {
          this.listLoading = false;
        });
    },
    // 更新用户信息
    upDateSort(){
    }
  },
  created () {
    this.getList();
  },
  filters:{
    formStatus(val){
      if(val == 0){
        return val = '提现中'
      }else if(val == 1){
        return val = '提现成功'
      }else{
        return val = '提现失败'
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.container{
    margin: 35px 0;
    .upload-demo{
      display: inline-block;
    }
}
</style>
